import { FC } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import game1 from '@/assets/images/index/game1.png'
import game2 from '@/assets/images/index/game2.png'
import './index.scss'

interface ISwiperGame {}

const SwiperGame: FC<ISwiperGame> = () => {

	const { t } = useTranslation()


	return (
		<div id="swiper-game">
            <div className="swiper-game-item one flex">
				<div className="img-box">
					<img src={game1} alt="" />
				</div>
				<div className="game-num">
					<p className="game-name">{t('indexBanner.dragonIce')}</p>
					<div className="game-num-btn">10.000 SHUI</div>
				</div>
			</div>
            <div className="swiper-game-balance">
				<div className="top-box flex">
					<p className="top-tittle">999</p>
					<p className="top-name">{t('indexBanner.dragon')}</p>
				</div>
				<div className="balance-title flex-between">
					<span>{t('indexBanner.ice')}</span>
					<span>{t('indexBanner.balance')}</span>
				</div>
				<p className="balance-value">NaN%</p>
				<div className="balance-title flex-between">
					<span>{t('indexBanner.ice')}</span>
					<span>{t('indexBanner.balance')}</span>
				</div>
				<p className="balance-value">NaN%</p>
			</div>
            <div className="swiper-game-item two flex">
				<div className="img-box">
					<img src={game2} alt="" />
				</div>
				<div className="game-num two">
					<p className="game-name">{t('indexBanner.dragonFire')}</p>
					<div className="game-num-btn">10.000 SHUI</div>
				</div>
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(SwiperGame)